<template>
	<div class="bigDiv">
		<el-form :inline="true" label-width="100px">
			<div class="topNav">
				<el-button type="text" icon="el-icon-search" @click="getList" style="float:right;">搜索</el-button>
				<el-button type="text" icon="el-icon-refresh" @click="reset"
					style="float:right;margin-right:10px;">重置</el-button>
				<el-button type="text" icon="el-icon-plus" @click="editProduct">新增人员</el-button>
			</div>
			<el-form-item label="账号">
				<el-input v-model="queryParams.account" placeholder="账号" clearable size="small"
					@keyup.enter.native="getList"  />
			</el-form-item>
			<el-form-item label="姓名">
				<el-input v-model="queryParams.name" placeholder="姓名" clearable size="small"
					@keyup.enter.native="getList" />
			</el-form-item>
			<el-form-item label="角色">
				<el-select filterable v-model="queryParams.role" @change="$forceUpdate()" size="small" clearable>
					<el-option :value="item.id" :label="item.name" v-for="item in roleList"></el-option>
				</el-select>
			</el-form-item>
		</el-form>

		<el-table v-loading="loading" :data="list" border height="calc(100vh - 320px)">
			<el-table-column label="账号" align="center" prop="account" fixed="left"></el-table-column>
			<el-table-column label="姓名" align="center" prop="name"></el-table-column>
			<el-table-column label="角色" align="center" prop="post"></el-table-column>
			<el-table-column label="操作" align="center" width="150" fixed="right">
				<template slot-scope="scope">
					<el-button type="text" size="mini" class="deleteBtn" @click="editProduct(scope.row)">
						修改
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
			:limit.sync="queryParams.pageSize" @pagination="getList" />

		<!-- 产品维护弹窗 -->
		<el-dialog title="人员维护" :visible.sync="productModel" :close-on-click-modal="false"
			:close-on-press-escape="false" width="60%">
			<el-form ref="productForm" :model="productForm" label-width="100px" :rules="rules">
				<el-row>
					<el-col :span="10">
						<el-form-item label="账号" prop="account">
							<el-input v-model="productForm.account" placeholder="请输入账号" :disabled="productForm.id"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="3">
						<el-form-item  prop="account" class="account">
							<el-button @click="selShopUserList();" type="primary">查询</el-button>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="姓名" prop="name">
							<el-input v-model="userInfo.name" placeholder="请输入账号" disabled ref="aaa"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="角色" prop="role">
							<el-select filterable v-model="productForm.role" @change="$forceUpdate()">
								<el-option :value="item.id" :label="item.name" v-for="item in roleList"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="productModel = false">取 消</el-button>
				<el-button type="primary" @click="submitProduct()">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import {selProductList,insertProduct,updateProduct,delProduct,
	selectUser,
	
	insertProjectFile,
	selProjectFile,
	delProjectFile,
	selUserList,
	selPostList,
	selShopUserList,
	insertUser,
	updateUser} from '@/api/workOrder.js'
	// 上传文件
	import fileUpdata from '@/api/file.config'
	export default {
		name: "product",
		// 页面数据
		data() {
			return {
				queryParams: {
					pageNum: 1, // 显示第一页数据
					pageSize: 10, //每页显示十条
					startTime: "",
					endTime: "",
					productName: "",
				},
				productForm: {
					productName: '',
					productUser: '',
					productDesc: '',
					code: '',
					describe: ''
				},
				detailForm: {
					productForm: '',
					productUser: '',
					describe: ''
				},
				stateList: [{
						label: '待审批',
						value: 1
					},
					{
						label: '待确认',
						value: 2
					},
					{
						label: '待开发',
						value: 3
					},
					{
						label: '开发中',
						value: 4
					},
					{
						label: '待验收',
						value: 5
					},
					{
						label: '已完成',
						value: 6
					}
				],
				loading: false,
				list: [],
				total: 0, // 一共多少条数据
				timeModel: [],
				productModel: false,
				detailModel: false,
				rules: {
					productName: [{
						required: true,
						message: "请您输入产品名称",
						trigger: "blur"
					}, ],
					productUser: [{
						required: true,
						message: "请选择负责人",
						trigger: "change"
					}],
				},
				userList:[],
				fileHeaders: fileUpdata.headers(),
				fileUrl: process.env.VUE_APP_BASE_API + `/vapi/file/uploadfile?objectName=workOrder`,		
				fileInfo:'',
				fileList:[],
				roleList:[],
				userInfo:{}
			};
		},
		// 初始化
		mounted() {
			this.getList();
			this.selectUser();
			this.selPostList();
		},
		// 函数集合
		methods: {
			//查询商城用户
			selShopUserList(){
				var that = this;
				if(this.productForm.account){
					selShopUserList({
						account:this.productForm.account,
						pageNum:1,
						pageSize:1000000
					}).then(res=>{
						if(res.code == 200){
							if(res.rows.length > 0){
								that.userInfo = res.rows[0];
								that.productForm.name = res.rows[0].name;
								setTimeout(function() {
									that.productForm.name = res.rows[0].name;
									that.$refs.aaa.focus();
								}, 300);
							}
						}
					})
				}else{
					this.$message.error("请输入钢都卡号")
				}
				
				
			},
			//查询角色列表
			selPostList(){
				selPostList().then(res=>{
					this.roleList = res.rows;
				})
			},
			// 查询项目文档
			selProjectFile(){
				var that = this;
				selProjectFile().then(res=>{
					that.fileList = res.rows;
				})
			},
			// 下载文件
			downLoadProjectFile(row){
				this.getBlob(row.filePath,(blob) => {
					this.saveAs(blob,row.fileName)
				})
			},
			getBlob(url,cb){
				var xhr = new XMLHttpRequest;
				xhr.open('GET',url,true);
				xhr.responseType = 'blob';
				xhr.onload = function(){
					if(xhr.status == 200){
						cb(xhr.response)
					}
				}
				xhr.send();
			},
			saveAs(blob, fileName) {
				if (window.navigator.msSaveOrOpenBlob) {
					navigator.msSaveBlob(blob, fileName)
				} else {
					const link = document.createElement('a')
					const body = document.querySelector('body')
					link.href = window.URL.createObjectURL(blob)
					link.download = fileName
					link.style.display = 'none'
					body.appendChild(link)
					link.click()
					body.removeChild(link)
					window.URL.revokeObjectURL(link.href)
				}
			},
			// 删除文件
			deleteProjectFile(row){
				var that = this;
				that.$confirm('是否删除项目文档?', '温馨提示', {
					confirmButtonText: '是',
					cancelButtonText: '否',
					type: 'warning'
				}).then(() => {
					delProjectFile({
						id:row.id
					}).then(res=>{
						if(res == 1){
							that.$message.success("文档删除成功")
							that.selProjectFile();
						}else{
							that.$message.error("文档删除失败")
						}
					}).catch(err=>{
						that.$message.error("文档删除失败")
					})
				}).catch(() => {
				
				})
				
			},
			handleExceed(files, fileList) {
				this.$message.warning(`最多可上传 1 个附件，您已超限`)
			},
			handleAvatarSuccess(res, file, fileList, type) {
				var that = this;
				that.fileInfo = file;
				// that.fileList.push(file)
				// 在这里已经上传了，执行插入文档操作
				insertProjectFile({
					projectNo:that.detailForm.projectNo,
					filePath:res.data,
					fileName:file.name,
					fileType:"DOC"
				}).then(res=>{
					if(res == 1){
						that.selProjectFile();
						that.$message.success("文档上传成功")
					}
				})
			},
			handleAvatarError(res, file) {
				this.$message.error("文件上传失败，请重试")
			},
			//查询用户信息
			selectUser(){
				selectUser().then(res=>{
					if(res.code == 200){
						this.userList = res.rows;
					}
				})
			},
			// 修改产品
			editProduct(row) {
				var type = "";
				if (row.id) {
					// 修改
					type = "edit";
					row.role = row.pid;
					this.productForm = row;
				} else {
					// 新增
					type = "add";
					this.productForm = {};
				}
				this.userInfo = row;
				this.dealType = type;
				this.productModel = true;
			},
			// 查看产品详情
			lookProduct(row) {
				this.detailForm = row;
				this.detailModel = true;
				// this.selProjectFile();
			},
			// 删除产品
			delProduct(row) {
				var that = this;
				this.$confirm('是否删除该条产品?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					delProduct({
						id:row.id
					}).then(res=>{
						if(res == 1){
							this.$message.success("产品删除成功");
							that.getList();
						}else{
							this.$message.success(res.msg);
						}
					})
				}).catch(() => {

				})
			},
			//提交产品
			submitProduct() {
				var that = this;
				this.$refs["productForm"].validate((valid) => {
					if (valid) {
						if(that.productForm.id){
							// 修改
							updateUser({
								uid:that.productForm.id,
								code:that.productForm.role
							}).then(res=>{
								if(res.data == 1){
									that.$message.success("人员更新成功");
									that.getList();
									that.productModel = false;
								}else{
									that.$message.success("人员更新失败");
								}
							})
						}else{
							// 新增
							insertUser({
								uid:that.userInfo.id,
								code:that.productForm.role
							}).then(res=>{
								if(res.code == 500){
									that.$message.error(res.msg);
								}else{
									that.$message.success("人员新增成功");
									that.getList();
									that.productModel = false;
								}
							})
						}
					}
				});
			},
			//初始化列表
			getList() {
				this.loading = true;
				selUserList({
					...this.queryParams
				}).then(res=>{
					this.list = res.rows
					this.total = res.total
					this.loading = false;
				})
			
			},
			reset() {
				this.queryParams = {
					pageNum: 1,
					pageSize: 10
				}
			},

		}
	}
</script>
<style scoped lang='scss'>
	.editBtn span {
		color: red;
	}

	.deleteBtn span {
		color: red;
	}

	.detailBtn span {
		color: red;
	}

	.el-date-editor.el-input,
	.el-date-editor.el-input__inner {
		width: 100%;
	}

	.detailForm {
		.el-form-item {
			margin-bottom: 0px;
		}
	}
	::v-deep .account  .el-form-item__content{
		margin-left:20px !important;
	}
</style>